<template>
    <div class="wrapper">
        <Tabs :active-tab="tab" :router="true" :tab-list="tabList" />
        <div class="container">
            <div class="content">
                <slot />
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import {Tabs} from "@/components";
import {handleGetData} from "@/router/config";
import {systemRouter} from "@/router/router";

const {tab} = defineProps({
    tab: {
        type: String,
        default: "",
        required: true,
    },
});

const tabList = handleGetData(systemRouter);
</script>
<style scoped lang="less">
.wrapper {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    .container {
        height: 100%;
        padding: 16px;
        box-sizing: border-box;
        overflow: hidden;
        .content {
            width: 100%;
            height: 100%;
            box-sizing: border-box;
            border-radius: 4px;
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }
    }
}
</style>
